<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>智能问答</title>
    <meta content="Responsive admin theme build on top of Bootstrap 4" name="description">

    <!-- 引入样式文件 -->
    <link href="/static/static/css/bootstrap-datepicker.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/static/css/morris.css">
    <link href="/static/static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/metismenu.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://unpkg.com/vue@2.6.14/dist/vue.css">
</head>

<body>
    <div class="header-bg">
        <!-- 导航栏 -->
        <header id="topnav" style="background-color: #1D84DE">
            <div class="topbar-main" style="background-color: #1D84DE">
                <div class="container-fluid">
                    <div>
                        <a href="" class="logo" style="margin-top: 10px;display: flex">
                            <img src="../static/static/weathericon/方块.png" style="width: 40px; height: 40px;margin-top: 5px;margin-right: 5px">
                            <h3 style="color: white">天气数据分析可视化</h3>
                        </a>
                    </div>
                    <div class="menu-extras topbar-custom navbar p-0">
                        <ul class="navbar-right ml-auto list-inline float-right mb-0">
                            <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                                <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                    <i class="fas fa-expand noti-icon" style="color: white"></i>
                                </a>
                            </li>
                            <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                                <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                    <h5 style="color: #fff">
                                        {{ userInfo.username }}
                                    </h5>
                                </a>
                            </li>
                            <li class="dropdown notification-list list-inline-item">
                                <div class="dropdown notification-list nav-pro-img">
                                    <a class="dropdown-toggle nav-link arrow-none waves-effect nav-user"
                                       data-toggle="dropdown" href="#" role="button" aria-haspopup="false"
                                       aria-expanded="false">
                                        <img src="/static/static/picture/user-1.jpg" alt="user" class="rounded-circle">
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown">
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item " href="/userApp/logOut"><i
                                                class="mdi mdi-power"></i> 退出登录</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item " href="/userApp/userinfo"><i
                                                class="ion-ios-planet"></i> 个人信息</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="/userApp/pwdchange"><i
                                                class="ion-ios-save"></i> 密码修改</a>
                                    </div>
                                </div>
                            </li>
                            <li class="menu-item dropdown notification-list list-inline-item">
                                <a class="navbar-toggle nav-link">
                                    <div class="lines">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="navbar-custom">
                <div class="container-fluid">
                    <div id="navigation">
                        <ul class="navigation-menu">
                            <li class="has-submenu">
                                <a href="/userApp/index"><i class="dripicons-home"></i> 首页</a>
                            </li>
                            <li class="has-submenu">
                                <a href="#"><i class="dripicons-view-thumb"></i> 城市数据分析</a>
                                <ul class="submenu">
                                    <li><a href="/userApp/CityData">年度分析</a></li>
                                    <li><a href="/userApp/CityMonth">月份分析</a></li>
                                </ul>
                            </li>
                            <li class="has-submenu">
                                <a href="#"><i class="dripicons-view-list"></i> 全国数据分析</a>
                                <ul class="submenu">
                                    <li><a href="/userApp/monthTempChar">月温度分析</a></li>
                                    <li><a href="/userApp/monthAirCha">月份空气质量</a></li>
                                </ul>
                            </li>
                            <li class="has-submenu">
                                <a href="/userApp/screen?user=true"><i class="dripicons-map"></i> 历史数据大屏</a>
                            </li>
                            <li class="has-submenu">
                                <a href="/userApp/chatAI"><i class="dripicons-network-2"></i> 智能问答</a>
                            </li>
                            <li class="has-submenu">
                                <a href="/userApp/weather_deatil_view"><i class="dripicons-view-thumb"></i> 详情信息</a>
                            </li>
                            <li class="has-submenu">
                                <a href="/userApp/weatherforecast/"><i class=" dripicons-star"></i>天气播报</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
    </div>

    <div class="wrapper" style="padding-top: 30px; margin-left: 25%">
        <div class="container-fluid">
            <div class="row">
                <div class="col-8">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="mt-0 header-title">智能问答</h4>
                            <div id="chat-container">
                                <div id="chat-messages" style="height: 500px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
                                    <!-- 聊天消息将在这里显示 -->
                                </div>
                                <div style="margin-top: 10px;">
                                    <input type="text" id="user-input" placeholder="请输入您的问题..." style="width: 70%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                                    <button id="send-btn" style="width: 25%; padding: 8px; background-color: #1D84DE; color: white; border: none; border-radius: 4px; cursor: pointer;">
                                        发送问题
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入脚本文件 -->
    <script src="/static/static/js/jquery.min.js"></script>
    <script src="/static/static/js/bootstrap.bundle.min.js"></script>
    <script src="/static/static/js/jquery.slimscroll.js"></script>
    <script src="/static/static/js/waves.min.js"></script>
    <script src="/static/static/js/apexcharts.min.js"></script>
    <script src="/static/static/js/bootstrap-datepicker.min.js"></script>
    <script src="/static/static/js/swiper-bundle.min.js"></script>
    <script src="/static/static/js/morris.min.js"></script>
    <script src="/static/static/js/raphael.min.js"></script>
    <script src="/static/static/js/dashboard.init.js"></script>
    <script src="/static/static/js/app.js"></script>
    <script src="/static/static/js/echarts.js"></script>
    <script src="/static/static/js/china.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const chatMessages = document.getElementById('chat-messages');
            const userInput = document.getElementById('user-input');
            const sendBtn = document.getElementById('send-btn');

            // 发送消息的函数
            function sendMessage() {
                const question = userInput.value.trim();
                if (question === '') {
                    return;
                }

                // 创建用户消息容器
                const userMessageDiv = document.createElement('div');
                userMessageDiv.className = 'user-message-container';
                userMessageDiv.style.display = 'flex';
                userMessageDiv.style.alignItems = 'flex-end';
                userMessageDiv.style.justifyContent = 'flex-end'; // 用户消息在右边
                userMessageDiv.style.marginBottom = '10px';

                // 创建用户头像
                const userAvatar = document.createElement('div');
                userAvatar.className = 'user-avatar';
                userAvatar.style.width = '40px';
                userAvatar.style.height = '40px';
                userAvatar.style.borderRadius = '50%';
                userAvatar.style.marginLeft = '10px';
                userAvatar.style.backgroundColor = '#e3f2fd';
                userAvatar.innerHTML = '<img src="/static/static/picture/img.png" style="width: 100%; height: 100%; object-fit: cover;">';

                // 创建用户消息
                const userText = document.createElement('div');
                userText.className = 'user-message';
                userText.style.backgroundColor = '#e3f2fd';
                userText.style.padding = '8px 12px';
                userText.style.borderRadius = '5px';
                userText.style.maxWidth = '80%';
                userText.textContent = question;

                // 将用户头像和消息添加到容器
                userMessageDiv.appendChild(userText);
                userMessageDiv.appendChild(userAvatar);

                // 添加用户消息到聊天窗口
                chatMessages.appendChild(userMessageDiv);

                // 清空输入框
                userInput.value = '';

                // 调用后端接口获取AI回复
                fetch('/userApp/chat/', {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': getCSRFToken(),
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `message=${encodeURIComponent(question)}`,
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        // 创建AI消息容器
                        const aiMessageDiv = document.createElement('div');
                        aiMessageDiv.className = 'ai-message-container';
                        aiMessageDiv.style.display = 'flex';
                        aiMessageDiv.style.alignItems = 'flex-start';
                        aiMessageDiv.style.marginBottom = '10px';

                        // 创建AI头像
                        const aiAvatar = document.createElement('div');
                        aiAvatar.className = 'ai-avatar';
                        aiAvatar.style.width = '40px';
                        aiAvatar.style.height = '40px';
                        aiAvatar.style.borderRadius = '50%';
                        aiAvatar.style.marginRight = '10px';
                        aiAvatar.style.backgroundColor = '#533CFF';
                        aiAvatar.style.color = 'white';
                        aiAvatar.style.display = 'flex';
                        aiAvatar.style.alignItems = 'center';
                        aiAvatar.style.justifyContent = 'center';
                        aiAvatar.style.fontSize = '18px';
                        aiAvatar.textContent = 'AI';

                        // 创建AI消息
                        const aiText = document.createElement('div');
                        aiText.className = 'ai-message';
                        aiText.style.backgroundColor = '#f5f5f5';
                        aiText.style.padding = '8px 12px';
                        aiText.style.borderRadius = '5px';
                        aiText.style.maxWidth = '80%';
                        aiText.textContent = data.response;

                        // 将AI头像和消息添加到容器
                        aiMessageDiv.appendChild(aiAvatar);
                        aiMessageDiv.appendChild(aiText);

                        // 添加AI消息到聊天窗口
                        chatMessages.appendChild(aiMessageDiv);

                        // 滚动到底部
                        chatMessages.scrollTop = chatMessages.scrollHeight;
                    } else {
                        console.error('Error:', data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
            }

            // 获取 Django 的 CSRF Token
            function getCSRFToken() {
                const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]');
                return csrfToken ? csrfToken.value : '';
            }

            // 页面加载时发送AI欢迎消息
            fetch('/userApp/chat/', {
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCSRFToken(),
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `message=`,
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // 创建AI消息容器
                    const aiMessageDiv = document.createElement('div');
                    aiMessageDiv.className = 'ai-message-container';
                    aiMessageDiv.style.display = 'flex';
                    aiMessageDiv.style.alignItems = 'flex-start';
                    aiMessageDiv.style.marginBottom = '10px';

                    // 创建AI头像
                    const aiAvatar = document.createElement('div');
                    aiAvatar.className = 'ai-avatar';
                    aiAvatar.style.width = '40px';
                    aiAvatar.style.height = '40px';
                    aiAvatar.style.borderRadius = '50%';
                    aiAvatar.style.marginRight = '10px';
                    aiAvatar.style.backgroundColor = '#7969f1';
                    aiAvatar.style.color = 'white';
                    aiAvatar.style.display = 'flex';
                    aiAvatar.style.alignItems = 'center';
                    aiAvatar.style.justifyContent = 'center';
                    aiAvatar.style.fontSize = '18px';
                    aiAvatar.textContent = '小K';

                    // 创建AI消息
                    const aiText = document.createElement('div');
                    aiText.className = 'ai-message';
                    aiText.style.backgroundColor = '#f5f5f5';
                    aiText.style.padding = '8px 12px';
                    aiText.style.borderRadius = '5px';
                    aiText.style.maxWidth = '80%';
                    aiText.textContent = data.response;

                    // 将AI头像和消息添加到容器
                    aiMessageDiv.appendChild(aiAvatar);
                    aiMessageDiv.appendChild(aiText);

                    // 添加AI消息到聊天窗口
                    chatMessages.appendChild(aiMessageDiv);

                    // 滚动到底部
                    chatMessages.scrollTop = chatMessages.scrollHeight;
                } else {
                    console.error('Error:', data.message);
                }
            });

            // 绑定发送按钮点击事件
            sendBtn.addEventListener('click', sendMessage);

            // 绑定回车键发送消息
            userInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
        });
    </script>
</body>
<style>
    body {
        padding-bottom: 0px !important;
    }
</style>
</html>